<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../default/css/index.css" />
    <style>
        header a{
            color: #fff;
        }
        .cash-withdrawal-btn{
            width: 100px;
            vertical-align: inherit;
        }
        .encryptedName{
            max-height: 100px;
            width: 100%;
        }
        .mui-content{
            padding-bottom: 50px;
            width: 100%;
            position: relative;
        }
        .foot-btn-box{
            border: 0;
        }
        .mui-bar-transparent{
            background-color: rgba(255, 255, 255, 0);
        }
        #commodityDetails,#item2{
            width: 97%;
            margin: 0 auto;
            overflow-x: hidden;
        }
        #commodityDetails p,#item2 p{
            margin: 0;
            padding: 0;
        }
        #commodityDetails p,#commodityDetails img{padding:0;margin:0;border:none;
            display: block;}
        .mui-pull-left{
            color:#ffdb28;
        }

        /*商品详情优化*/
        #wrap{
            width: 100%;
        }
        #wrap[data-fixed="fixed"]{
            position: fixed;
            top:44px;
            left: 0;
            margin: 0;
            z-index: 500;
        }
        .deta-box-but{
            border-top: 1px solid #f5f5f5;
        }
        .mui-segmented-control .mui-control-item{
            background: #fff;
            border-color: #ffdb28;
            border-left: 1px solid #ffdb28;
        }
        .mui-segmented-control{
            border: 1px solid #ffdb28;
        }
        .mui-segmented-control .mui-control-item.mui-active{
            background: #ffdb28;
        }
        .foot-btn-box{
            padding: 0;
        }
        .cash-withdrawal-btn{
            width: 100%;
            border-radius: 0;
            height: 50px;
        }

        /*弹出样式*/
        .mui-plus .plus{
            display: inline;
        }
        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        .deta-box-cent{
            height: 40%;
            border-top: 1px solid #f5f5f5;
        }
        #topPopover .mui-popover-arrow {
            left: 0;
            right: 6px;
        }
        .mui-popover {
            height: 300px;
            width: 100%;
        }

        .deta-box-whilte .mui-icon{
            font-size: 50px;
            font-weight: 550;
        }
        .deta-box-cent .mui-scroll-wrapper{
            height: 100%;
        }
        .deta-box-cent span{
            border: 1px solid #f5f5f5;
        }

    </style>
</head>
<body>
<header class="mui-bar mui-bar-transparent">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<h1 class="mui-title">商品详情</h1>-->
    <!--<a class="mui-icon mui-icon-more mui-pull-right" href="#forward"></a>-->
</header>

<div class="mui-content">
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop" id="banner-list-box">

        </div>
        <div class="mui-slider-indicator" id="banner-list-list">

        </div>
    </div>
    <div class="shop-de-title-box">
        <strong><p id="tradeName">-----</p></strong>
        <h4><span id="commodityPrice">-----</span><p class="mui-icon icon iconfont icon-huiyuan red member-shop"></p></h4>
        <p id="productBrief">----</p>
        <p class="red member-shop" style="font-size: 12px">提示:该产品为VIP产品,已是会员不可兑换!</p>
    </div>
    <div class="top-shadow"></div>
    <div id="wrap">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#commodityDetails">商品详情</a>
            <a class="mui-control-item" href="javascript:;" id="gousubing">规格参数</a>
        </div>
    </div>
    <div style="height: 100%;padding-bottom: 50px">
        <div id="commodityDetails" class="mui-control-content mui-active"></div>
        <div id="item2" class="mui-control-content"></div>
    </div>

</div>
<nav class="foot-btn-box mui-text-right">
        <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn goto-placeorder">立即兑换</button>
</nav>

<div class="detaile-up-box">
    <div class="deta-box-whilte">
        <div class="day-task-icon-clos mui-text-right "><i class="mui-icon mui-icon-closeempty"></i></div>
        <div class="mui-row pading10-15">
            <div class="mui-col-sm-4 mui-col-xs-4">
                <img src="" class="encryptedName" alt="">
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6 deta-box-paric">
                <h4 class="red"><span id="commodityPriceen">-----</span><p class="mui-icon icon iconfont icon-huiyuan red member-shop"></p></h4>
                <p>库存:<b  class="commodityInventory"></b></p>
            </div>
        </div>
        <h4 style="padding-left: 20px">商品规格</h4>
        <div class="deta-box-cent ">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll pading10-15">
                    <!--这里放置真实显示的DOM内容-->
                    <div class="deta-box-acitve">

                    </div>
                </div>
            </div>

        </div>
       <!-- <div class="mui-input-row pading10-15 border-box">
            <label>数量</label>
            &lt;!&ndash;<input type="text" class="mui-input-clear" id="buy-shop-input" placeholder="1" value="1" readonly>&ndash;&gt;
            <div class="mui-numbox"data-numbox-min='1' data-numbox-max='100'>
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input class="mui-input-numbox" type="number" id="buy-shop-input"/>
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
        </div>-->
        <div class="deta-box-but">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-block">确定</button>
        </div>
    </div>

</div>










<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<script>
    mui.init();

    var slider = mui("#slider");
    slider.slider({
        interval: 5000
    });

    mui('.mui-scroll').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    mui.showLoading("正在加载..","div");

    // 用户为vip
    var uservip = '';
    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }
    //商品ID
    var commodityId = getUrlParam('targetId');
    // 会员产品
    var designatedProduct = '';
    //兑换金额
    var purchaseAmount='';
    // 用户阅读宝
    var balance;
    // 商品阅读宝金额
    var commodityReadingTreasure;
    // 改变后商品阅读宝的金额
    var newscommodityReadingTreasure;
    // 库存
    var commodityInventory;
    // 规格id
    var specificationsId;
    // 规格名字
    var specification_name;
    // 规格价格(阅读宝)
    var commodity_price;
    // 规格价格(现金)
    var cash;

    $(function () {
        areMembers();
        findshopById();
        findByUserBalance();
        queryCommodityId();
    });


    // 判断用户是否为会员
    function areMembers() {
        $.ajax({
            url:website+'/UserController/areMembers',
            type:'post',
            data:{
                userId : userId
            },
            success:function (data) {
                console.log(data);
                uservip=data.data
            }
        });
    }

    // 查询用户的分销佣金和阅读宝,和朋友
    function findByUserBalance() {
        // 查询用户的阅读宝和余额
        $.ajax({
            url: website + '/UserController/findByUserBalance ',
            type: 'post',
            data: {userId: userId},
            success: function (data) {
                if (data.data.balance == null) {
                    $("#balance").html('0');
                    balance=0;
                } else {
                    balance=data.data.balance;
                }

            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                mui.openWindow({
                    url: "http://newst.whilte.com/index.html",
                });
            }
        });

    };

    // 查询商品详细信息
    function findshopById() {
        mui.showLoading("正在加载..","div");
        $.ajax({
            url:website+'/CommodityController/findById',
            type:'post',
            dataType: "json",
            data:{
                id: commodityId
            },
            success:function (data) {
                var html='';
                var html2 = '';
                data.data.commodityPicturesList.forEach(function (value,i) {
                    console.log(data);
                    html+='<div class="mui-slider-item">\n' +
                        '                        <a href="#">\n' +
                        '                        <img src="'+value.encryptedName+'">\n' +
                        '                        </a>\n' +
                        '                        </div>';
                        if(i==0){
                            html2+='<div class="mui-indicator mui-active"></div>'
                        }else {
                            html2+='<div class="mui-indicator"></div>'
                        }

                });
                if(data.data.commodityPicturesList.length == 0){
                    html+='<div class="mui-slider-item">\n' +
                        '                        <a href="#">\n' +
                        '                        <img src="'+data.data.commodity.encryptedName+'">\n' +
                        '                        </a>\n' +
                        '                        </div>';
                    html2+='<div class="mui-indicator mui-active"></div>'
                }

                $("#banner-list-box").html(html);
                $("#banner-list-list").html(html2);
                $(".encryptedName").attr('src',data.data.commodity.encryptedName);
                // 第一张是最后一张
                var html3='<div class="mui-slider-item mui-slider-item-duplicate"><a href="#">';
                if(data.data.commodityPicturesList.length==0){
                    html3+='<img src="'+data.data.commodity.encryptedName+'">'
                }else {
                    html3+='<img src="'+data.data.commodityPicturesList[data.data.commodityPicturesList.length-1].encryptedName+'">';
                }
                html3+='</a></div>';
                $("#banner-list-box").prepend(html3);

                // 最后一张是第一张
                var html4 = '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#">';
                if(data.data.commodityPicturesList.length==0){
                    html4+='<img src="'+data.data.commodity.encryptedName+'">'
                }else {
                    data.data.commodityPicturesList.forEach(function (value,i) {
                        if(i==0){
                            html4+='<img src="'+data.data.commodityPicturesList[data.data.commodityPicturesList.length-1].encryptedName+'">';
                        }
                    });
                }
                html4+='</a></div>';
                $("#banner-list-box").append(html4);



                designatedProduct=data.data.commodity.designatedProduct;
                commodityInventory=data.data.commodity.commodityInventory;
                $(".commodityInventory").html(data.data.commodity.commodityInventory);
                if(commodityInventory==0){
                    $(".deta-box-but button").addClass('this-shop-full');
                }
                if(data.data.commodity.commodityReadingTreasure==0 || data.data.commodity.commodityReadingTreasure=='' || data.data.commodity.commodityReadingTreasure==null){
                    $("#commodityPrice").html('￥'+data.data.commodity.commodityPrice);
                    $("#commodityPriceen").html('￥'+data.data.commodity.commodityPrice);
                    commodityReadingTreasure=0;
                    newscommodityReadingTreasure=0;
                    $('.goto-placeorder').html('立即购买');

                }else if(data.data.commodity.commodityPrice==0 || data.data.commodity.commodityPrice=='' || data.data.commodity.commodityPrice==null){
                    $("#commodityPrice").html(data.data.commodity.commodityReadingTreasure+'阅读宝');
                    $("#commodityPriceen").html(data.data.commodity.commodityReadingTreasure+'阅读宝')
                    commodityReadingTreasure=data.data.commodity.commodityReadingTreasure;
                    newscommodityReadingTreasure=data.data.commodity.commodityReadingTreasure;
                }else{
                    $("#commodityPrice").html('￥'+data.data.commodity.commodityPrice+'+'+data.data.commodity.commodityReadingTreasure+'阅读宝');
                    $("#commodityPriceen").html('￥'+data.data.commodity.commodityPrice+'+'+data.data.commodity.commodityReadingTreasure+'阅读宝')
                    commodityReadingTreasure=data.data.commodity.commodityReadingTreasure;
                    newscommodityReadingTreasure=data.data.commodity.commodityReadingTreasure;
                    $('.goto-placeorder').html('立即购买');
                }
                $("#tradeName").html(data.data.commodity.tradeName);
                $("#productBrief").html(data.data.commodity.productBrief);
                $("#commodityDetails").html(data.data.commodity.commodityDetails);

                purchaseAmount=data.data.commodity.commodityPrice;
                var slider = mui("#slider");
                slider.slider({
                    interval: 5000
                });
                mui.hideLoading();
            },error:function () {
                mui.alert('未知错误，请返回到首页', '提示', function () {
                    mui.openWindow({
                        url: '../../index.html',
                    });
                });
            }
        });
    }

    function queryCommodityId() {
        mui.showLoading("正在加载..","div");
        $.ajax({
            url: website + '/CommoditySpecificationController/queryCommodityId',
            type: 'post',
            data: {commodityId: commodityId},
            success: function (data) {
                var html='';
                data.data.forEach(function (value,i) {
                        if(value.cash!=null && value.commodity_price!=null){
                            html+='<span data-state-id="'+value.id+'" data-shop-cash="'+value.cash+'"  data-commodityReadingTreasure="'+value.commodity_price+'">'+value.specification_name+'</span>'
                        }else if(value.cash==null){
                            html+='<span data-state-id="'+value.id+'" data-shop-cash="0"  data-commodityReadingTreasure="'+value.commodity_price+'">'+value.specification_name+'</span>'
                        }else if(value.commodity_price==null){
                            html+='<span data-state-id="'+value.id+'" data-shop-cash="'+value.cash+'"  data-commodityReadingTreasure="0">'+value.specification_name+'</span>'
                        }
                })
                $(".deta-box-acitve").append(html);
                mui.hideLoading();
            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                mui.openWindow({
                    url: "http://newst.whilte.com/index.html",
                });
            }
        });
    }


    // 触发选中规格事件
    mui(".deta-box-acitve").on('tap', 'span', function () {
        if($(this).hasClass('this-active')){
            $(this).siblings().removeClass('this-active');
            $(this).removeClass('this-active');
            if(commodityReadingTreasure==0 || commodityReadingTreasure=='' || commodityReadingTreasure==null){
                $("#commodityPriceen").html('￥'+purchaseAmount);
            }else if(purchaseAmount==0 || purchaseAmount=='' || purchaseAmount==null){
                $("#commodityPriceen").html(commodityReadingTreasure+'阅读宝');
            }else{
                $("#commodityPriceen").html('￥'+purchaseAmount+'+'+commodityReadingTreasure+'阅读宝');
            }
            specification_name='';
            specificationsId='';
            commodity_price='';
        }else{
            commodity_price= this.getAttribute('data-commodityreadingtreasure');
            $(this).addClass('this-active');
            $(this).siblings().removeClass('this-active');
            specificationsId=this.getAttribute('data-state-id');
            cash=this.getAttribute('data-shop-cash');

            specification_name=$(this).html();
            newscommodityReadingTreasure = commodity_price;

            if(cash!=0 && newscommodityReadingTreasure==0){
                $("#commodityPriceen").html('￥'+cash);
            }else if(cash==0 && newscommodityReadingTreasure!=0){
                $("#commodityPriceen").html(newscommodityReadingTreasure+'阅读宝');
            }else if(cash!=0 && newscommodityReadingTreasure!=0){
                $("#commodityPriceen").html('￥'+cash+'+'+newscommodityReadingTreasure+'阅读宝');
            }else if(cash==0 & newscommodityReadingTreasure==0){
                $("#commodityPriceen").html('免费');
            }
        }
    });

    // 关闭规格框
    mui(".deta-box-whilte").on('tap', '.mui-icon-closeempty', function () {
        $(".detaile-up-box").hide();
        $('body').css('overflow','inherit');
    });


    // 开启规格框
    mui(".foot-btn-box").on('tap', '.goto-placeorder', function () {
        $('body').css('overflow','hidden');
        $(".detaile-up-box").show();
    });
    mui("#segmentedControl").on('tap', '#gousubing', function () {
        $('body').css('overflow','hidden');
        $(".detaile-up-box").show();
    });



    mui(".deta-box-but").on('tap', 'button', function () {

        if(uservip=='是' && designatedProduct=='是'){
            mui.alert('VIP用户不可继续兑换VIP产品', '提示', function () {
                mui.openWindow({
                    url: 'shop.html'
                });
            });
            return false;
        }else if($(".deta-box-acitve .this-active").length==0){
            mui.alert('请选择商品规格!', '提示', function () {

            });
            return false;
        }else if($(this).hasClass('this-shop-full')){
            mui.alert('该产品库存不足!', '提示', function () {
                mui.openWindow({
                    url: 'shop.html'
                });
            });
            return false;
        }else if(balance<newscommodityReadingTreasure){
            mui.alert('您的阅读宝不足，不能兑换该商品!', '提示', function () {
                mui.openWindow({
                    url: 'shop.html'
                });
            });
            return false;
        }else {
            //商品ID
            localStorage.setItem('commodityId',commodityId);
            //兑换金额
            localStorage.setItem('purchaseAmount',cash);
            //是否是会员产品
            localStorage.setItem('designatedProduct',designatedProduct);
            // 商品的阅读宝
            localStorage.setItem('newscommodityReadingTreasure',newscommodityReadingTreasure);
            // 规格id
            localStorage.setItem('specificationsId',specificationsId);
            // 规格名称
            localStorage.setItem('specification_name',specification_name);
            // 规格价格(阅读宝)
            localStorage.setItem('commodity_price',commodity_price);


            setTimeout(function () {
                mui.openWindow({
                    url: 'placeOrder.html'
                });
            },500)
        }
    });





</script>
<script>
    function ceiling(obj) {
        document.onscroll = function () {
        var ot = obj.offsetTop;
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            /*
             * 在这里我给obj添加一个自定义属性。className可能会影响原有的class
             * 三元运算使代码更简洁
             */
            obj.setAttribute("data-fixed",st >= ot?"fixed":"");
        }
    }

    window.onload = function () {
        /*获取导航对象*/
        var wrap = document.getElementById("wrap");
        ceiling(wrap) /*调用吸顶函数  */
    };

</script>
</body>
</html>